<template>
    <div class="login">

        <el-card class="login-box-card">
            <el-form label-width="80px" :model="form" ref="form">
                <el-form-item class="label1" label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item class="label2" label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-button class="loginbutton" type="primary" @click="login">登录</el-button>
                    <el-button class="registerbutton" @click="jumpToRegister">注册</el-button>
                </el-form-item>


            </el-form>
        </el-card>
    </div>

</template>

<script>


export default {
    components: {

    },

    data() {
        return {
            form: {
                username: "",
                password: ""
            }
        }
    },
    methods: {
        login() {
            if (this.form.username == "" || this.form.password == "") {
                this.$message.error("请输入正确的用户名和密码")
                return
            }
            this.$axios.get("http://localhost:8000/login", {
                params: {
                    username: this.form.username,
                    password: this.form.password
                }
            })
                .then(res => {
                    console.log(res)
                    const token = res.data
                    console.log(token)
                    sessionStorage.setItem('access-admin', token)
                    this.getUserType()
                    
                }
                )
                .catch(err => {
                    this.$message.error("用户名或密码错误！")
                })
        },
        jumpToRegister() {
            this.$router.push('/register')
        },
        getUserType() {
            this.$axios.get("http://localhost:8000/getUserInfo", {
                headers: {
                    Authorization: sessionStorage.getItem('access-admin')
                }
            }).then(res => {
                console.log(res.data.type)
                if(res.data.type==1){
                    this.$router.push('/admin')
                }else if(res.data.type==0){
                    this.$router.push('/user/home')
                }
            }).catch(err => {
                console.log(err)
                this.$message.error(err.response.data.message)
            })
        },
    }

}
</script>

<style lang="scss">
.login {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;

    .login-box-card {
        width: 450px;
        margin: 0 auto;

        .label1 {
            position: relative;
            right: 20px;
        }

        .label2 {
            position: relative;
            right: 20px;
        }


    }
}
</style>